<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="grid">
        <title>Excel Export | Kendo UI Grid</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn how to set the Excel export functionality of the Kendo UI Grid widget.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("controls/data-management/grid/excel-export.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//controls/data-management/grid/excel-export.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="excel-export"><a href="#excel-export">Excel Export</a></h1>

<p>As of the Kendo UI Q3 2014 (2014.3.1119) release, the Grid widget provides a built-in Excel export functionality.</p>

<h2 id="enable-export-to-excel"><a href="#enable-export-to-excel">Enable Export to Excel</a></h2>

<p>To enable Excel export, include the corresponding toolbar command and configure the export settings.</p>

<ul>
<li><a href="/api/javascript/ui/grid#configuration-toolbar">Toolbar Configuration</a></li>
<li><a href="/api/javascript/ui/grid#configuration-excel">Excel Export Configuration</a></li>
<li><a href="http://demos.telerik.com/kendo-ui/grid/excel-export">Online Demo</a></li>
</ul>

<p>You need to include JSZip script on the page. For more information on the requirements to do this, refer to <a href="/framework/excel/introduction#requirements">Requirements</a>.</p>

<p>The following example demonstrates how to enable the Excel export functionality of a Kendo UI Grid.</p>

<h6>Example</h6>

<pre data-lang="html"><code>    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"&gt;&lt;/script&gt;

    &lt;div id="grid"&gt;&lt;/div&gt;
    &lt;script&gt;
        $("#grid").kendoGrid({
            toolbar: ["excel"],
            excel: {
                fileName: "Kendo UI Grid Export.xlsx"
            },
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                },
                pageSize: 7
            },
            sortable: true,
            pageable: true,
            columns: [
                { width: 300, field: "ProductName", title: "Product Name" },
                { field: "UnitsOnOrder", title: "Units On Order" },
                { field: "UnitsInStock", title: "Units In Stock" }
            ]
        });
    &lt;/script&gt;
</code></pre>

<p>To initiate Excel export through code, call the <a href="/api/javascript/ui/grid.html#methods-saveAsExcel"><code>saveAsExcel</code></a> method.</p>

<blockquote>
<p><strong>Important</strong></p>

<ul>
<li>By default, the Grid exports the current page of the data with sorting, filtering, grouping, and aggregates applied.</li>
<li>The Grid uses the current column order, visibility, and dimensions to generate the Excel file.</li>
<li>The Grid does not export the current CSS theme in the Excel file. For more information on how to change the visual appearance of the Excel document, refer to the below section about <a href="/controls/data-management/grid/excel-export#customize-the-excel-document">customization of the Excel document</a>.</li>
<li>The Grid exports only data-bound columns. All columns that do not have their <a href="/api/javascript/ui/grid#configuration-columns.field">field</a> option set are ignored.</li>
<li>The <a href="/api/javascript/ui/grid#configuration-columns.format"><code>format</code></a> option is not used during export. For more information, refer to the section on <a href="/controls/data-management/grid/excel-export#limitations">column formats</a>.</li>
<li>The <a href="/api/javascript/ui/grid#configuration-columns.template"><code>template</code></a> option is not used during export. For more information, refer to the section on <a href="/controls/data-management/grid/excel-export#limitations">column templates</a>.</li>
<li>The <a href="/api/javascript/ui/grid#configuration-detailTemplate"><code>detailTemplate</code></a> option is not used during export. For more information, refer to the section on <a href="/controls/data-management/grid/excel-export#limitations">detail templates</a>.</li>
</ul>
</blockquote>

<h2 id="features"><a href="#features">Features</a></h2>

<h3 id="excel-export-of-all-data"><a href="#excel-export-of-all-data">Excel Export of All Data</a></h3>

<p>By default, the Grid exports only the current page of data. To export all pages, set the <a href="/api/javascript/ui/grid#configuration-excel.allPages"><code>allPages</code></a> option to <code>true</code>.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>When the <code>allPages</code> option is set to <code>true</code> and <code>serverPaging</code> is enabled, the Grid will make a <code>"read"</code> request for all data. If the data items are too many, the browser may become unresponsive. In such cases, consider the implementation of <a href="#server-side-processing">server-side export</a>.</p>
</blockquote>

<p>The following example demonstrates how to export all the data from a Kendo UI Grid to Excel.</p>

<h6>Example</h6>

<pre data-lang="html"><code>    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"&gt;&lt;/script&gt;

    &lt;div id="grid"&gt;&lt;/div&gt;
    &lt;script&gt;
        $("#grid").kendoGrid({
            toolbar: ["excel"],
            excel: {
                allPages: true
            },
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                },
                pageSize: 7
            },
            pageable: true,
            columns: [
                { width: 300, field: "ProductName", title: "Product Name" },
                { field: "UnitsOnOrder", title: "Units On Order" },
                { field: "UnitsInStock", title: "Units In Stock" }
            ]
        });
    &lt;/script&gt;
</code></pre>

<h3 id="excel-customization"><a href="#excel-customization">Excel Customization</a></h3>

<p>The <a href="/api/javascript/ui/grid#events-excelExport"><code>excelExport</code></a> event allows customization of the generated Excel document.</p>

<p>The <code>workbook</code> event argument exposes the generated Excel workbook configuration.</p>

<p>For a better understanding about how Excel documents work, refer to the <a href="/framework/excel/introduction#excel-document-creation">introductory article on Excel</a>.</p>

<p>For more information on how to use the <code>background</code> option to set the background color of alternating rows while exporting the Grid to Excel, refer to <a href="/controls/data-management/grid/how-to/excel/alternating-rows">this example</a>.</p>

<h3 id="right-to-left-support"><a href="#right-to-left-support">Right-to-Left Support</a></h3>

<p>The <a href="/api/javascript/ui/grid#events-excelExport"><code>excelExport</code></a> event allows reversing the cells and setting the text alignment to support right-to-left (RTL) languages.</p>

<h6>Example</h6>

<pre data-lang="html"><code>    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"&gt;&lt;/script&gt;

    &lt;div class="k-rtl"&gt;
      &lt;div id="grid" &gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
      $("#grid").kendoGrid({
        toolbar: ["excel"],
        excel: {
          allPages: true
        },
        dataSource: {
          type: "odata",
          transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
          },
          pageSize: 7
        },
        excelExport: function(e) {
          var sheet = e.workbook.sheets[0];
          for (var i = 0; i &lt; sheet.rows.length; i++) {
            sheet.rows[i].cells.reverse();
            for (var ci = 0; ci &lt; sheet.rows[i].cells.length; ci++) {
              sheet.rows[i].cells[ci].hAlign = "right";
            }
          }
        },
        pageable: true,
        columns: [
          { width: 300, field: "ProductName", title: "Product Name" },
          { field: "UnitsOnOrder", title: "Units On Order" },
          { field: "UnitsInStock", title: "Units In Stock" }
        ]
      });
    &lt;/script&gt;
</code></pre>

<h3 id="row-type"><a href="#row-type">Row Type</a></h3>

<p>Each row has a <code>type</code> field that can be used to distinguish between the various row types in the Grid.</p>

<p>The possible values are:</p>

<ul>
<li><code>"header"</code></li>
<li><code>"footer"</code></li>
<li><code>"groupHeader"</code></li>
<li><code>"groupFooter"</code></li>
<li><code>"data"</code></li>
</ul>

<h3 id="multiple-grids"><a href="#multiple-grids">Multiple Grids</a></h3>

<p>Each Grid is exported in a separate Excel sheet. For more information on how to export multiple Grids in a single Excel document, see <a href="/controls/data-management/grid/how-to/excel/multiple-grid-export">this example</a>.</p>

<h3 id="saving-files-on-server"><a href="#saving-files-on-server">Saving Files on Server</a></h3>

<p>It might be useful sometimes to send the generated file to a remote service. To achieve this, prevent the default file saving and post the <code>base64</code> encoded contents.</p>

<p>The following example demonstrates how to post files to the server.</p>

<h6>Example</h6>

<pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"&gt;&lt;/script&gt;

&lt;div id="grid"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#grid").kendoGrid({
        toolbar: ["excel"],
        dataSource: {
            type: "odata",
            transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
            },
            pageSize: 7
        },
        pageable: true,
        columns: [
            { width: 300, field: "ProductName", title: "Product Name" },
            { field: "UnitsOnOrder", title: "Units On Order" },
            { field: "UnitsInStock", title: "Units In Stock" }
        ],
        excelExport: function(e) {
            // Prevent the default behavior which will prompt the user to save the generated file.
            e.preventDefault();
            // Get the Excel file as a data URL.
            var dataURL = new kendo.ooxml.Workbook(e.workbook).toDataURL();
            // Strip the data URL prologue.
            var base64 = dataURL.split(";base64,")[1];
            // Post the base64 encoded content to the server which can save it.
            $.post("/server/save", {
                base64: base64,
                fileName: "ExcelExport.xlsx"
            });
        }
    });
&lt;/script&gt;
</code></pre>

<h3 id="limitations"><a href="#limitations">Limitations</a></h3>

<h4>Column Templates</h4>

<p>The Grid does not use <a href="/api/javascript/ui/grid#configuration-columns.template">column templates</a> during the Excel export—it exports only the data. The reason for this behavior is that a column template might contain arbitrary HTML which cannot be converted to Excel column values. For more information on how to use a column template that does not contain HTML, refer to <a href="/controls/data-management/grid/how-to/excel/column-template-export">this column template example</a>.</p>

<h4>Column Format</h4>

<p>The Grid does not use <a href="/api/javascript/ui/grid.html#configuration-columns.format">column formats</a> during the Excel export because some Kendo UI formats are incompatible with Excel. To format the cell values, set the <a href="/api/javascript/ooxml/workbook.html#configuration-sheets.rows.cells.format"><code>format</code></a> option of the cells.</p>

<p>For more information on the formats that are supported by Excel, refer to <a href="https://support.office.com/en-us/article/Create-a-custom-number-format-78f2a361-936b-4c03-8772-09fab54be7f4">this page</a>.</p>

<p>For more information on how to format cell values, refer to <a href="/controls/data-management/grid/how-to/excel/cell-format">this example</a>.</p>

<h4>Detail Templates</h4>

<p>The Grid does not export its <a href="/api/javascript/ui/grid#configuration-detailTemplate">detail template</a> for the same reason as it does not export its column templates. If the detail template contains another Grid, follow <a href="/controls/data-management/grid/how-to/excel/detail-grid-export">the example on the exporting a detail Grid</a>.</p>

<h2 id="server-side-processing"><a href="#server-side-processing">Server-Side Processing</a></h2>

<p>To export huge datasets to Excel, a well-suited solution is the new <a href="http://docs.telerik.com/devtools/document-processing/libraries/radspreadstreamprocessing/overview">RadSpreadStreamProcessing library</a> which is part of <a href="http://docs.telerik.com/devtools/document-processing/introduction">Telerik Document Processing (TDP) by Progress</a>.</p>

<p>For examples on how to export Excel files, refer to the <a href="http://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/overview">RadSpreadProcessing library</a>.</p>

<p>For more information on the Grid server-side processing, refer to <a href="http://docs.telerik.com/aspnet-mvc/helpers/grid/excel-export#use-server-side-processing">this article</a>.</p>

<h2 id="troubleshooting"><a href="#troubleshooting">Troubleshooting</a></h2>

<h3 id="javascript-error-is-thrown-that-jszip-is-not-found"><a href="#javascript-error-is-thrown-that-jszip-is-not-found">JavaScript Error Is Thrown That JSZip Is Not Found</a></h3>

<p>Clicking <strong>Export to Excel</strong> or calling the <code>saveAsExcel</code> throws an exception if the JSZip JavaScript library is not found. To solve this issue, include JSZip in the page. For more information on this, see <a href="/controls/data-management/grid/how-to/excel/alternating-rows#requirements">the introductory help topic about exporting to Excel</a>.</p>

<h3 id="excel-export-is-not-working-in-internet-explorer-and-safari"><a href="#excel-export-is-not-working-in-internet-explorer-and-safari">Excel Export Is Not Working in Internet Explorer and Safari</a></h3>

<p>Internet Explorer 9 and Safari do not support the option for saving a file and require the implementation of a <a href="/framework/save-files/introduction#browser-support">server proxy</a>. Set the <a href="/api/javascript/ui/grid#configuration-excel.proxyURL"><code>proxyURL</code></a> option to specify the server proxy URL, as shown below.</p>

<h6>Example</h6>

<pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"&gt;&lt;/script&gt;

&lt;div id="grid"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#grid").kendoGrid({
        toolbar: ["excel"],
        excel: {
            fileName: "Kendo UI Grid Export.xlsx",
            proxyURL: "/proxy"
        },
        dataSource: {
            type: "odata",
            transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
            },
            pageSize: 7
        },
        sortable: true,
        pageable: true,
        columns: [
            { width: 300, field: "ProductName", title: "Product Name" },
            { field: "UnitsOnOrder", title: "Units On Order" },
            { field: "UnitsInStock", title: "Units In Stock" }
        ]
    });
&lt;/script&gt;
</code></pre>

<h2 id="known-limitations"><a href="#known-limitations">Known Limitations</a></h2>

<ul>
<li>The maximum size of the exported file has a system-specific limit. For large data sets, it is highly recommended that you use the server-side solution the <a href="http://docs.telerik.com/devtools/document-processing/introduction">Document Processing Library</a> provides. The <a href="http://docs.telerik.com/devtools/document-processing/libraries/radspreadstreamprocessing/overview">RadSpreadStreamProcessing</a> component is particularly suited for large data sets.</li>
<li>As discussed in the previous section, exporting in older browsers, such as Internet Explorer 9 and Safari, requires the implementation of a server proxy. For more information, refer to <a href="/api/javascript/ui/grid#configuration-excel.proxyURL">the <code>proxyUrl</code> configuration section</a>.</li>
<li>If you use Kendo UI Q2 2014 SP2 (2014.2.1008) or older, exporting requires a custom implementation and there are two ways to approach the task:

<ul>
<li>Use a server-side implementation to directly export the data that is otherwise displayed by the Grid.</li>
<li>Use a client-side implementation to export the table HTML markup or the dataSource items of the Grid.</li>
</ul>
</li>
</ul>

<blockquote>
<p><strong>Important</strong></p>

<p>The Grid and its dataSource contain only the data items from the current page during client-side export. As a result, either make the export in chunks, or disable the paging feature.</p>
</blockquote>

<h2 id="further-reading"><a href="#further-reading">Further Reading</a></h2>

<ul>
<li><a href="http://www.telerik.com/support/code-library/export-grid-to-excel-8d91dd145501">Export Kendo UI Grid to Excel</a></li>
<li><a href="https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/excel-export-server-side">Export MVC Grid to Excel</a></li>
<li><a href="https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/pdf-export-server-side">Export MVC Grid to PDF</a></li>
<li><a href="https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/csv-export-server-side">Export MVC Grid to CSV</a></li>
<li><a href="/framework/excel/introduction">Create Excel Documents with Kendo UI</a></li>
<li><a href="/framework/save-files/introduction">Save Files with Kendo UI</a></li>
<li><a href="/api/javascript/ooxml/workbook">JavaScript API Reference: kendo.ooxml.Workbook</a></li>
</ul>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<ul>
<li><a href="/api/javascript/ui/grid">Grid JavaScript API Reference</a></li>
<li><a href="/controls/data-management/grid/walkthrough">Walkthrough of the Grid</a></li>
<li><a href="/controls/data-management/grid/editing">Editing Functionality of the Grid</a></li>
<li><a href="/controls/data-management/grid/appearance">Appearance of the Grid</a></li>
<li><a href="/controls/data-management/grid/localization">Localization of Messages in the Grid</a></li>
<li><a href="/controls/data-management/grid/adaptive">Adaptive Rendering of the Grid</a></li>
<li><a href="/controls/data-management/grid/pdf-export">Export of the Grid in PDF</a></li>
<li><a href="/controls/data-management/grid/pdf-export">Printing of the Grid</a></li>
</ul>

<p>For how-to examples on the Kendo UI Grid widget, browse its <a href="/controls/data-management/grid/how-to/AngularJS/use-telerik-backend-services-with-angular"><strong>How To</strong> documentation folder</a>.</p> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

